<template>
	<view>
		<slot name="content" v-bind:imgList="imgList" v-bind:num="num" v-bind:maxlength="maxlength"
			v-bind:isShow="isShow" />
	</view>
</template>
<script>
	import {
		UploadImage
	} from '@/common/utils/index'
	import {
		SERVER_TYPE
	} from '@/common/config.js'
	export default {
		name: 'benben-images-upload',
		props: {
			maxlength: {
				type: [String, Number],
				default: '9',
			},
			imgList: {
				type: Array,
				default: () => [],
			},
			isShowTips: {
				type: Boolean,
				default: false,
			},
			imgIds: {
				type: String,
				default: '',
			},
		},
		data: () => ({
			uploading: false,
			imgIdArr: [],
		}),
		computed: {
			isShow() {
				return this.imgList.length < this.maxlength
			},
			num() {
				return this.imgList.length || 0
			},
		},
		//监听imgIds
		watch: {
			imgIds: {
				handler(val) {
					if (SERVER_TYPE !== 0) {
						this.imgIdArr = val ? (val + '').split(',') : []
					}
				},
				immediate: true,
			},
			imgList: {
				handler(val) {
					if (SERVER_TYPE === 0) {
						this.$emit('update:img-ids', JSON.stringify(val))
					}
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			//点击删除
			delImage(index) {
				let imgList = JSON.parse(JSON.stringify(this.imgList))
				imgList.splice(index, 1)
				this.$emit('update:img-list', imgList)
				if (SERVER_TYPE !== 0) {
					let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
					imgIdArr.splice(index, 1)
					this.$emit('update:img-ids', imgIdArr.join(','))
				}
			},
			//点击预览
			previewImage(index) {
				uni.previewImage({
					current: this.imgList[index],
					urls: this.imgList,
				})
			},
			//点击上传
			manyChooseImage() {
				let self = this
				let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
				let imgList = JSON.parse(JSON.stringify(this.imgList))
				if (self.uploading) return
				if (self.maxlength - self.imgList.length < 1) return
				console.log(uni.getStorageSync('is_camera'));
				if (uni.getStorageSync('is_camera') == 0) {
					let self = this
					uni.showModal({
						title: '提示',
						content: '访问您的相机或相册权限，使用拍照或选择照片功能，用于上传头像或上传图片，是否允许？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.setStorageSync('is_camera', 1);
								// 从相册中选择图片
								uni.chooseImage({
									count: self.maxlength - self.imgList.length, // 默认3
									sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
									success: function(res) {
										self.uploading = true
										// 开始上传
										new UploadImage(res.tempFiles, {
											complete: function(res) {
												self.uploading = false
												res.map((item) => {
													imgIdArr.push(item.id)
													imgList.push(item.path)
												})
												if (SERVER_TYPE !== 0) {
													self.$emit('update:img-ids', imgIdArr.join(','))
												}
												self.$emit('update:img-list', imgList)
											},
										})
									},
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})
				} else {
					// 从相册中选择图片
					uni.chooseImage({
						count: self.maxlength - self.imgList.length, // 默认3
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						success: function(res) {
							self.uploading = true
							// 开始上传
							new UploadImage(res.tempFiles, {
								complete: function(res) {
									self.uploading = false
									res.map((item) => {
										imgIdArr.push(item.id)
										imgList.push(item.path)
									})
									if (SERVER_TYPE !== 0) {
										self.$emit('update:img-ids', imgIdArr.join(','))
									}
									self.$emit('update:img-list', imgList)
								},
							})
						},
					})
				}
			},
		},
		// 组件周期函数--监听组件挂载完毕
		mounted() {},
		// 组件周期函数--监听组件数据更新之前
		beforeUpdate() {},
		// 组件周期函数--监听组件数据更新之后
		updated() {},
		// 组件周期函数--监听组件激活(显示)
		activated() {},
		// 组件周期函数--监听组件停用(隐藏)
		deactivated() {},
		// 组件周期函数--监听组件销毁之前
		beforeDestroy() {},
	}
</script>
<style></style>